<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">异动记录</title>
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/font-awesome/6.4.0/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .header p {
            font-size: 16px;
            opacity: 0.9;
        }

        .card {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        /* 优化后的搜索框样式 */
        .search-box {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
            align-items: center;
            background: #f8f9fa;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .search-box .form-group {
            margin-bottom: 0;
            min-width: 100px;
            flex: 1;
        }

        .search-box .form-group label {
            font-size: 11px;
            margin-bottom: 2px;
            color: #666;
            display: block;
            font-weight: 500;
        }

        .search-box .form-group input,
        .search-box .form-group select {
            padding: 6px 8px;
            font-size: 13px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            height: 32px;
        }

        .date-range-group {
            display: flex;
            flex-direction: column;
            min-width: 160px;
            flex: 0 0 auto;
        }

        .date-range-group label {
            font-size: 11px;
            color: #666;
            margin-bottom: 2px;
            display: block;
            font-weight: 500;
        }

        .date-range-inputs {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .date-range-group input[type="date"] {
            flex: 1;
            padding: 6px 6px;
            font-size: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-width: 70px;
            height: 32px;
        }

        .date-separator {
            color: #666;
            font-size: 11px;
            margin: 0 1px;
            flex: 0 0 auto;
        }

        .search-buttons {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 4px;
            height: 32px;
            min-width: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-sm:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .btn-reset {
            background: #6c757d;
            color: white;
            border: none;
            padding: 6px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
        }

        .btn-reset:hover {
            background: #5a6268;
            transform: translateY(-1px);
        }

        .btn-reset i {
            font-size: 12px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.2s;
            margin-right: 10px;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-sm {
            padding: 8px 16px;
            font-size: 14px;
        }

        .btn-primary {
            background: #007bff;
        }

        .btn-success {
            background: #28a745;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .table th,
        .table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
            vertical-align: middle;
        }

        .table th {
            background: #f8f9fa;
            font-weight: 600;
        }

        .table tr:hover {
            background: #f8f9fa;
        }

        .abnormal-type {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .abnormal-type.rise {
            background: #f8d7da;
            color: #721c24;
        }

        .abnormal-type.fall {
            background: #d4edda;
            color: #155724;
        }

        .abnormal-type.unknown {
            background: #e2e3e5;
            color: #383d41;
        }

        /* 异动幅度样式 */
        .abnormal-ratio {
            font-weight: 600;
            font-size: 14px;
        }

        .abnormal-ratio.rise {
            color: #dc3545;
        }

        .abnormal-ratio.fall {
            color: #28a745;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }

        .page-btn {
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .page-btn:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .page-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .success {
            background: #d4edda;
            color: #155724;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .report-link {
            color: #007bff;
            text-decoration: none;
            margin-right: 10px;
        }

        .report-link:hover {
            text-decoration: underline;
        }

        .footer {
            text-align: center;
            color: white;
            opacity: 0.8;
            margin-top: 30px;
            font-size: 14px;
        }

        .no-data {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .stock-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .stock-info h3 {
            color: #667eea;
            margin-bottom: 10px;
        }

        /* 移动端优化样式 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
                max-width: 100%;
            }

            .header {
                margin-bottom: 20px;
            }

            .header h1 {
                font-size: 20px;
                margin-bottom: 5px;
            }

            .header p {
                font-size: 14px;
            }

            .card {
                padding: 15px;
                border-radius: 12px;
                margin-bottom: 15px;
            }

            /* 优化后的移动端搜索框 */
            .search-box {
                padding: 8px;
                gap: 6px;
            }

            .search-box .form-group {
                min-width: calc(50% - 6px);
                margin-bottom: 6px;
            }

            .search-box .form-group input,
            .search-box .form-group select {
                height: 30px;
                font-size: 12px;
            }

            .date-range-group {
                min-width: calc(50% - 6px);
            }

            .date-range-group input[type="date"] {
                height: 30px;
            }

            .search-buttons {
                width: 100%;
                justify-content: flex-end;
            }

            .btn-sm {
                height: 30px;
                flex: 1;
            }

            .btn-reset {
                width: 30px;
                height: 30px;
            }

            /* 股票信息移动端优化 */
            .stock-info {
                padding: 12px;
                margin-bottom: 15px;
            }

            .stock-info h3 {
                font-size: 16px;
                margin-bottom: 8px;
            }

            /* 表格移动端优化 */
            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border-radius: 8px;
                border: 1px solid #dee2e6;
            }

            .table {
                font-size: 12px;
                min-width: 700px; /* 保证表格最小宽度 */
            }

            .table th,
            .table td {
                padding: 8px 6px;
                white-space: nowrap;
                text-align: center;
                vertical-align: middle;
            }

            .table th {
                background: #667eea;
                color: white;
                font-size: 11px;
                font-weight: 600;
            }

            /* 异动类型标签移动端优化 */
            .abnormal-type {
                font-size: 10px;
                padding: 2px 6px;
            }

            /* 分页移动端优化 */
            .pagination {
                gap: 5px;
                margin-top: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .page-btn {
                padding: 8px 12px;
                font-size: 14px;
                min-width: 40px;
            }

            /* 报告链接移动端优化 */
            .report-link {
                font-size: 12px;
                margin-right: 8px;
            }
        }

        /* 超小屏幕优化 */
        @media (max-width: 480px) {
            .container {
                padding: 8px;
            }

            .card {
                padding: 12px;
            }

            .header h1 {
                font-size: 18px;
            }

            /* 搜索框超小屏幕优化 */
            .search-box .form-group {
                min-width: 100%;
            }

            .date-range-group {
                min-width: 100%;
            }

            .search-buttons {
                margin-top: 5px;
            }

            .table {
                font-size: 11px;
                min-width: 600px;
            }

            .table th,
            .table td {
                padding: 6px 4px;
                text-align: center;
                vertical-align: middle;
            }

            .report-link {
                font-size: 11px;
                margin-right: 6px;
                display: block;
                margin-bottom: 3px;
            }
        }

        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            animation: fadeIn 0.3s;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: none;
            border-radius: 12px;
            width: 80%;
            max-width: 400px;
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            animation: slideIn 0.3s;
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin: 0;
        }

        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
        }

        .modal-body {
            padding: 10px 0;
            color: #666;
            line-height: 1.5;
        }

        .modal-footer {
            text-align: right;
            margin-top: 20px;
        }

        .modal-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 8px 20px;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
        }

        .modal-btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .modal-btn-secondary {
            background: #6c757d;
            margin-right: 10px;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 移动端弹窗优化 */
        @media (max-width: 768px) {
            .modal-content {
                width: 90%;
                margin: 20% auto;
                padding: 20px 15px;
            }

            .modal-title {
                font-size: 16px;
            }

            .close {
                font-size: 24px;
            }

            .modal-content {
                width: 95%;
                margin: 10% auto;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1 th:text="${title}">异动记录</h1>
        <p th:text="${description}">查看股票异动记录，掌握市场动态</p>
    </div>

    <div class="card">

        <!-- 优化后的搜索筛选区域 -->
        <div class="search-box">
            <div class="form-group">
                <label>股票代码</label>
                <input type="text" id="search-stock-code" placeholder="请输入股票代码" th:value="${stockCode}">
            </div>
            <div class="form-group">
                <label>股票名称</label>
                <input type="text" id="search-stock-name" placeholder="请输入股票名称" th:value="${stockName}">
            </div>
            <div class="form-group">
                <label>异动类型</label>
                <select id="search-abnormal-type">
                    <option value="">全部</option>
                    <option value="上涨" th:selected="${abnormalType == '上涨'}">上涨</option>
                    <option value="下跌" th:selected="${abnormalType == '下跌'}">下跌</option>
                </select>
            </div>
            <div class="date-range-group">
                <label>日期范围</label>
                <div class="date-range-inputs">
                    <input type="date" id="search-start-date" th:value="${startDate}">
                    <span class="date-separator">~</span>
                    <input type="date" id="search-end-date" th:value="${endDate}">
                </div>
            </div>
            <div class="search-buttons">
                <button class="btn btn-sm" onclick="searchRecords()">搜索</button>
                <button class="btn-reset" onclick="resetSearch()" title="重置">
                    <i class="fas fa-redo"></i>
                </button>
            </div>
        </div>

        <!-- 消息提示区域 -->
        <div id="message-area"></div>

        <!-- 记录列表 -->
        <div id="record-list">
            <!-- 服务端渲染的记录列表 -->
            <div th:if="${!isLoggedIn}" class="error">
                请先登录后查看异动记录
            </div>

            <div th:if="${isLoggedIn and errorMessage != null}" class="error" th:text="${errorMessage}"></div>

            <div th:if="${isLoggedIn and recordList != null and !recordList.empty}">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>股票代码</th>
                            <th>股票名称</th>
                            <th>异动类型</th>
                            <th>异动幅度</th>
                            <th>记录时间</th>
                            <th>分析报告</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="record : ${recordList}">
                            <td th:text="${record.stockCode} ?: '-'"></td>
                            <td th:text="${record.stockName} ?: '-'"></td>
                            <td>
                                    <span th:class="'abnormal-type ' + (${record.abnormalType} == '上涨' ? 'rise' : (${record.abnormalType} == '下跌' ? 'fall' : 'unknown'))"
                                          th:text="${record.abnormalType} ?: '未知'">
                                    </span>
                            </td>
                            <td>
                                    <span th:if="${record.abnormalRatio != null}"
                                          th:class="'abnormal-ratio ' + (${record.abnormalType} == '上涨' ? 'rise' : (${record.abnormalType} == '下跌' ? 'fall' : ''))"
                                          th:text="${record.abnormalType == '上涨' ? ('+' + #numbers.formatDecimal(record.abnormalRatio, 1, 2) + '%') :
                                                   (record.abnormalType == '下跌' ? ('-' + #numbers.formatDecimal(record.abnormalRatio, 1, 2) + '%') :
                                                   (#numbers.formatDecimal(record.abnormalRatio, 1, 2) + '%'))}">
                                    </span>
                                <span th:unless="${record.abnormalRatio != null}">-</span>
                            </td>
                            <td th:text="${record.createTime != null ? #temporals.format(record.createTime, 'yyyy-MM-dd HH:mm') : '-'}"></td>
                            <td>
                                    <span th:if="${record.abnormalReportAttachmentUrl != null and !#strings.isEmpty(record.abnormalReportAttachmentUrl)}">
                                        <a th:href="${record.abnormalReportAttachmentUrl}" target="_blank" class="report-link">查看</a>
                                        <a th:href="${record.abnormalReportAttachmentUrl}" download class="report-link">下载</a>
                                    </span>
                                <span th:unless="${record.abnormalReportAttachmentUrl != null and !#strings.isEmpty(record.abnormalReportAttachmentUrl)}">
                                        暂无报告
                                    </span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div th:if="${isLoggedIn and (recordList == null or recordList.empty) and errorMessage == null}" class="no-data">
                暂无异动记录数据
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination" id="pagination">
            <!-- 服务端渲染的分页 -->
            <div th:if="${isLoggedIn and totalPages != null and totalPages > 1}">
                <!-- 上一页 -->
                <button th:if="${currentPage != null and currentPage > 1}"
                        class="page-btn"
                        th:onclick="'changePage(' + ${currentPage - 1} + ')'">上一页</button>

                <!-- 页码按钮 - 简化逻辑，最多显示5个页码 -->
                <th:block th:if="${currentPage != null and totalPages != null}">
                    <!-- 第1页 -->
                    <button th:if="${currentPage == 1}" class="page-btn active">1</button>
                    <button th:if="${currentPage != 1}" class="page-btn" th:onclick="'changePage(1)'">1</button>

                    <!-- 省略号 -->
                    <span th:if="${currentPage > 3 and totalPages > 5}" style="padding: 8px;">...</span>

                    <!-- 当前页前一页 -->
                    <button th:if="${currentPage > 2}"
                            class="page-btn"
                            th:onclick="'changePage(' + ${currentPage - 1} + ')'"
                            th:text="${currentPage - 1}"></button>

                    <!-- 当前页 -->
                    <button th:if="${currentPage > 1 and currentPage < totalPages}"
                            class="page-btn active"
                            th:text="${currentPage}"></button>

                    <!-- 当前页后一页 -->
                    <button th:if="${currentPage < totalPages - 1}"
                            class="page-btn"
                            th:onclick="'changePage(' + ${currentPage + 1} + ')'"
                            th:text="${currentPage + 1}"></button>

                    <!-- 省略号 -->
                    <span th:if="${currentPage < totalPages - 2 and totalPages > 5}" style="padding: 8px;">...</span>

                    <!-- 最后一页 -->
                    <button th:if="${totalPages > 1 and currentPage == totalPages}"
                            class="page-btn active"
                            th:text="${totalPages}"></button>
                    <button th:if="${totalPages > 1 and currentPage != totalPages}"
                            class="page-btn"
                            th:onclick="'changePage(' + ${totalPages} + ')'"
                            th:text="${totalPages}"></button>
                </th:block>

                <!-- 下一页 -->
                <button th:if="${currentPage != null and totalPages != null and currentPage < totalPages}"
                        class="page-btn"
                        th:onclick="'changePage(' + ${currentPage + 1} + ')'">下一页</button>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>© 2025 Witmore AI - 让投资更智能</p>
    </div>
</div>

<!-- 错误弹窗 -->
<div id="errorModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">错误提示</h3>
            <span class="close">&times;</span>
        </div>
        <div class="modal-body" id="errorModalBody">
            <!-- 错误信息将在这里显示 -->
        </div>
        <div class="modal-footer">
            <button class="modal-btn" onclick="closeErrorModal()">确定</button>
        </div>
    </div>
</div>

<!-- 成功弹窗 -->
<div id="successModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">成功提示</h3>
            <span class="close">&times;</span>
        </div>
        <div class="modal-body" id="successModalBody">
            <!-- 成功信息将在这里显示 -->
        </div>
        <div class="modal-footer">
            <button class="modal-btn" onclick="closeSuccessModal()">确定</button>
        </div>
    </div>
</div>

<script th:inline="javascript">
        // 全局变量
        let currentPage = 1;
        let pageSize = 10;
        let stockCodeParam = /*[[${stockCode}]]*/ null;

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 如果有指定股票代码，初始化搜索条件
            if (stockCodeParam) {
                document.getElementById('search-stock-code').value = stockCodeParam;
                document.getElementById('stock-info').style.display = 'block';
                document.getElementById('stock-info-text').textContent = '股票代码: ' + stockCodeParam;
            }

            // 页面初次加载时已有服务端渲染的数据，不需要再次AJAX加载
            // loadRecordList();
        });

        // 显示消息
        function showMessage(message, type = 'success') {
            if (type === 'error') {
                showErrorModal(message);
            } else {
                showSuccessModal(message);
            }
        }

        // 显示错误弹窗
        function showErrorModal(message) {
            const modal = document.getElementById('errorModal');
            const body = document.getElementById('errorModalBody');
            body.innerHTML = message;
            modal.style.display = 'block';
        }

        // 显示成功弹窗
        function showSuccessModal(message) {
            const modal = document.getElementById('successModal');
            const body = document.getElementById('successModalBody');
            body.innerHTML = message;
            modal.style.display = 'block';
        }

        // 关闭错误弹窗
        function closeErrorModal() {
            const modal = document.getElementById('errorModal');
            modal.style.display = 'none';
        }

        // 关闭成功弹窗
        function closeSuccessModal() {
            const modal = document.getElementById('successModal');
            modal.style.display = 'none';
        }

        // 弹窗外部点击关闭
        window.onclick = function(event) {
            const errorModal = document.getElementById('errorModal');
            const successModal = document.getElementById('successModal');
            if (event.target == errorModal) {
                errorModal.style.display = 'none';
            }
            if (event.target == successModal) {
                successModal.style.display = 'none';
            }
        }

        // 点击关闭按钮
        document.addEventListener('DOMContentLoaded', function() {
            // 为所有关闭按钮添加事件监听
            const closeButtons = document.querySelectorAll('.close');
            closeButtons.forEach(button => {
                button.onclick = function() {
                    const modal = this.closest('.modal');
                    modal.style.display = 'none';
                }
            });
        });

        // 加载记录列表
        function loadRecordList() {
            const stockCode = document.getElementById('search-stock-code').value.trim();
            const stockName = document.getElementById('search-stock-name').value.trim();
            const abnormalType = document.getElementById('search-abnormal-type').value;
            const startDate = document.getElementById('search-start-date').value;
            const endDate = document.getElementById('search-end-date').value;

            const queryData = {
                stockCode: stockCode,
                stockName: stockName,
                abnormalType: abnormalType,
                startDate: startDate || null,
                endDate: endDate || null,
                page: currentPage,
                size: pageSize
            };

            fetch('/api/wechat/stock-abnormal-record/query', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(queryData)
            })
            .then(response => response.json())
            .then(result => {
                if (result.code === 200 || result.code === 0) {
                    // 构造前端期望的数据格式
                    const pageData = {
                        records: result.records,
                        total: result.page ? result.page.total : 0,
                        current: result.page ? result.page.current : 1,
                        size: result.page ? result.page.size : 10
                    };
                    renderRecordList(pageData);
                    renderPagination(pageData);
                } else {
                    showMessage(result.message || '加载失败', 'error');
                }
            })
            .catch(error => {
                console.error('加载异动记录失败:', error);
                showMessage('网络错误，请稍后重试', 'error');
            });
        }

        // 渲染记录列表
        function renderRecordList(pageData) {
            const container = document.getElementById('record-list');

            if (!pageData.records || pageData.records.length === 0) {
                container.innerHTML = '<div class="no-data">暂无异动记录数据</div>';
                return;
            }

            let html = `
                <div class="table-responsive">
                    <table class="table">
                    <thead>
                        <tr>
                            <th>股票代码</th>
                            <th>股票名称</th>
                            <th>异动类型</th>
                            <th>异动幅度</th>
                            <th>记录时间</th>
                            <th>分析报告</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

            pageData.records.forEach(record => {
                const abnormalTypeClass = record.abnormalType === '上涨' ? 'rise' :
                                        record.abnormalType === '下跌' ? 'fall' : 'unknown';

                const reportLinks = record.abnormalReportAttachmentUrl ?
                    `<a href="${record.abnormalReportAttachmentUrl}" target="_blank" class="report-link">查看</a>
                     <a href="${record.abnormalReportAttachmentUrl}" download class="report-link">下载</a>` :
                    '暂无报告';

                html += `
                    <tr>
                        <td>${record.stockCode || '-'}</td>
                        <td>${record.stockName || '-'}</td>
                        <td>
                            <span class="abnormal-type ${abnormalTypeClass}">
                                ${record.abnormalType || '未知'}
                            </span>
                        </td>
                        <td>${record.abnormalRatio ? record.abnormalRatio.toFixed(2) + '%' : '-'}</td>
                        <td>${formatDateTime(record.createTime)}</td>
                        <td>${reportLinks}</td>
                    </tr>
                `;
            });

            html += '</tbody></table></div>';
            container.innerHTML = html;
        }

        // 渲染分页
        function renderPagination(pageData) {
            const container = document.getElementById('pagination');
            const totalPages = Math.ceil(pageData.total / pageSize);

            if (totalPages <= 1) {
                container.innerHTML = '';
                return;
            }

            let html = '';

            // 上一页
            if (currentPage > 1) {
                html += `<button class="page-btn" onclick="changePage(${currentPage - 1})">上一页</button>`;
            }

            // 页码（显示前后2页）
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, currentPage + 2);

            if (startPage > 1) {
                html += `<button class="page-btn" onclick="changePage(1)">1</button>`;
                if (startPage > 2) {
                    html += `<span style="padding: 8px;">...</span>`;
                }
            }

            for (let i = startPage; i <= endPage; i++) {
                if (i === currentPage) {
                    html += `<button class="page-btn active">${i}</button>`;
                } else {
                    html += `<button class="page-btn" onclick="changePage(${i})">${i}</button>`;
                }
            }

            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    html += `<span style="padding: 8px;">...</span>`;
                }
                html += `<button class="page-btn" onclick="changePage(${totalPages})">${totalPages}</button>`;
            }

            // 下一页
            if (currentPage < totalPages) {
                html += `<button class="page-btn" onclick="changePage(${currentPage + 1})">下一页</button>`;
            }

            container.innerHTML = html;
        }

        // 切换页码
        function changePage(page) {
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('page', page);

            // 保持当前的搜索条件
            const stockCode = document.getElementById('search-stock-code').value.trim();
            const stockName = document.getElementById('search-stock-name').value.trim();
            const abnormalType = document.getElementById('search-abnormal-type').value;
            const startDate = document.getElementById('search-start-date').value;
            const endDate = document.getElementById('search-end-date').value;

            if (stockCode) urlParams.set('stockCode', stockCode);
            if (stockName) urlParams.set('stockName', stockName);
            if (abnormalType) urlParams.set('abnormalType', abnormalType);
            if (startDate) urlParams.set('startDate', startDate);
            if (endDate) urlParams.set('endDate', endDate);

            window.location.search = urlParams.toString();
        }

        // 搜索记录
        function searchRecords() {
            const urlParams = new URLSearchParams();
            urlParams.set('page', '1'); // 搜索时重置到第一页

            const stockCode = document.getElementById('search-stock-code').value.trim();
            const stockName = document.getElementById('search-stock-name').value.trim();
            const abnormalType = document.getElementById('search-abnormal-type').value;
            const startDate = document.getElementById('search-start-date').value;
            const endDate = document.getElementById('search-end-date').value;

            if (stockCode) urlParams.set('stockCode', stockCode);
            if (stockName) urlParams.set('stockName', stockName);
            if (abnormalType) urlParams.set('abnormalType', abnormalType);
            if (startDate) urlParams.set('startDate', startDate);
            if (endDate) urlParams.set('endDate', endDate);

            window.location.search = urlParams.toString();
        }

        // 重置搜索
        function resetSearch() {
            const urlParams = new URLSearchParams();
            if (stockCodeParam) {
                urlParams.set('stockCode', stockCodeParam);
            }
            window.location.search = urlParams.toString();
        }

        // 格式化日期时间
        function formatDateTime(dateTimeStr) {
            if (!dateTimeStr) return '-';

            try {
                const date = new Date(dateTimeStr);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');

                return `${year}-${month}-${day} ${hours}:${minutes}`;
            } catch (e) {
                return dateTimeStr;
            }
        }
    </script>
</body>
</html>
